<template>
    <div>
        <el-row class="first_label">
            <el-col :span="12">
                上海创城电信流量池-本月流量池信息概览
            </el-col>
            <el-col :span="3">
                数据同步时间：
            </el-col>
            <el-col :span="9">
                2018-07-12 10:30:09
            </el-col>
        </el-row>
        <div class="card-detail">
            <el-row>
                <el-col :span="3">
                    流量池总流量：
                </el-col>
                <el-col :span="5">
                    7.78 GB
                </el-col>
                <el-col :span="3">
                    卡号总数：
                </el-col>
                <el-col :span="5">
                    19
                </el-col>
                <el-col :span="3">
                    停卡卡数：
                </el-col>
                <el-col :span="5">
                    1
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    已用流量：
                </el-col>
                <el-col :span="5">
                    0.0 KB
                </el-col>
                <el-col :span="3">
                    激活卡数：
                </el-col>
                <el-col :span="5">
                    7
                </el-col>
                <el-col :span="3">
                    销卡卡数：
                </el-col>
                <el-col :span="5">
                    0
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    剩余流量：
                </el-col>
                <el-col :span="5">
                    7.78 KB
                </el-col>
                <el-col :span="3">
                    待激活卡数：
                </el-col>
                <el-col :span="5">
                    7
                </el-col>
                <el-col :span="3">
                    流量使用%：
                </el-col>
                <el-col :span="5">
                    0
                </el-col>
            </el-row>
        </div>
        <el-tabs @tab-click="handleClick" v-model="activeName" class="ptb15">
            <el-tab-pane v-for="(tab, index) in tabData" :label="tab.label" :name="tab.name" :key="index">
            </el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
         data() {
            return {
                tabData: [{
                        label: '流量池卡号列表',
                        name: 'pool_cards'
                    },
                    {
                        label: '流量池历史数据',
                        name: 'pool_histories'
                    },
                    {
                        label: '流量池财务信息',
                        name: 'pool_financial_statistics'
                    }
                ],
                activeName: 'pool_cards'
            }
        },
         created() {
            this.activeName = this.$route.name
            
        },
        methods: {
            handleClick(tab) {
                var path = '/agent_increase/' + this.$route.params.id9 + '/traffic_pools/' +this.$route.params.id20+'/' + tab.name
                if (tab.name === 'pool_cards') {
                    path = '/agent_increase/' + this.$route.params.id9 + '/traffic_pools/' +this.$route.params.id20
                }
                this.$router.push({
                    path: path
                })
            }
        },
        watch: {
            $route: {
                handler: function(to) {
                    this.tabData.forEach((tab) => {
                        this.activeName = to.name
                    });
                },
                // 深度观察监听
                deep: true
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-row.first_label {
        .el-col:nth-of-type(1), .el-col:nth-of-type(2) {
            font-weight: bold;
            text-align: left;
        }
        .el-col:nth-of-type(3) {
            padding-left: 15px;
            font-weight: normal;
        }
    }
    .el-row {
        .el-col {
            font-size: 14px;
            padding: 15px 0px;
        }
        .el-col:nth-of-type(2n + 1) {
            font-weight: bold;
            text-align: right;
        }
        .el-col:nth-of-type(2n) {
            padding-left: 15px;
        }
    }

    .card-detail {
        border: 1px solid rgba(54,64,74,0.08);
    }
    .ptb15 {
        padding: 15px 0px;
    }
</style>